<html>
    <head>
        <title>DHTMLX Windows</title>
        <link rel="stylesheet" type="text/css" href="DHTMLX/dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css">
        <link rel="stylesheet" type="text/css" href="DHTMLX/dhtmlxWindows/codebase/dhtmlxwindows.css">
        <link rel="stylesheet" type="text/css" href="DHTMLX/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
        <link rel="stylesheet" type="text/css" href="DHTMLX/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
        <link rel="stylesheet" type="text/css" href="CSS/desktop.css">
        <script src="DHTMLX/dhtmlxWindows/codebase/dhtmlxcommon.js"></script>
        <script src="DHTMLX/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
        <script src="DHTMLX/dhtmlxWindows/codebase/dhtmlxcontainer.js"></script>
        <script src="DHTMLX/dhtmlxMenu/codebase/dhtmlxcontainer.js"></script>
        <script src="DHTMLX/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
        <script src="DHTMLX/dhtmlxMenu/codebase/ext/dhtmlxmenu_ext.js"></script>
        <script src="DHTMLX/dhtmlxForm/codebase/dhtmlxform.js"></script>
        <script src="JQUERY/jquery.js"></script>
        <script src="JQUERY/jquery.ui.js"></script>
        <script src="JS/window.js"></script>
        <script src="JS/changewallpaper.js"></script>
        <script src="JS/icon.js"></script>
        <script>
           
            function  IconManager(){
                
                this.icons =[ { pic:"IMAGES/ICONS/disc.png" , name: "CD Drive", ondbclick:"alert('disc image')"},
                    {pic:"IMAGES/ICONS/computer.png" , name: "My Computer", ondbclick:"alert('My Computer')"}];
                this.selected=[];                 
            }
            
            IconManager.prototype.iconLoad=function () {
                var str="";
                try{
                    //alert(icons.length + str);
                    for(i=0;i<this.icons.length;i++) {
                        str += "<div class=\"icon\" onclick=\"ico.selectIcon(this)\" ondblclick=\""+ this.icons[i].ondbclick +"\"><img class=\"icon-image\" src=\"" + this.icons[i].pic + "\" /><div class=\"icon-text\">" + this.icons[i].name + "</div></div>";
                        //    alert(str);
                        document.getElementById("workarea").innerHTML=str;    
                    }
                
                }catch(e){
                    alert(e);
                }
                $(".icon").draggable();
            }
            
            IconManager.prototype.addFolder=function (newname) {
                $.ajax({url:"filemanagement.jsp?create=folder&path=desktop",success:function(result){
                        // $("div").html(result);
                        alert(result);
                    }});
                a={ pic:"IMAGES/ICONS/folder.png" , name: newname, ondbclick:"alert('disc image')"};
                this.iconAdd(a)
            }
            
            IconManager.prototype.selectIcon=function (iconid){
                //alert(iconid);
                if(this.selected.length>0){
                    for(i=0;i<this.selected.length;i++){
                        $(this.selected[i]).css("background-color","transparent")
                    }
                }
                $(iconid).css("background-color","lightgrey");
                this.selected[this.selected.length]=iconid;
            }
            IconManager.prototype.iconAdd=function (newIcon) {
                this.icons[this.icons.length]=newIcon;
                //alert(icons)
                this.iconLoad()
            }
            
            IconManager.prototype.addDocument=function (newname) {
                $.ajax({url:"filemanagement.jsp?create=Document&path=desktop",success:function(result){
                        // $("div").html(result);
                        alert(result);
                    }});
                a={ pic:"IMAGES/ICONS/xcalc.png" , name: newname, ondbclick:"alert('disc image')"};
                this.iconAdd(a)
            }
                
            
        </script>
    </head>
    <body>
        <div>

        </div>
        <div id="winVP" style="position: relative; height: 95%; width: 100%; border: #cecece 1px solid;">
            <div id="workarea">
                HI.
            </div>
            <div id="widget">
                hai
            </div>

        </div>
        <div id="taskbar">
            taskbar
        </div>
        <script>
            var workareaContextMenu;
            var ico;
            function onClickListener(id) {
                try{
                    if(id=="changeBackground"){
                        //alert('hi');
                    
                        changeBackground();
                   
                    }
                    else if(id=="Folder") {
                        ico.addFolder("New Folder");
                    }else if(id=="Document"){
                        ico.addDocument("New Documrnt.txt");
                    } 
                }catch(e) {
                    alert(e);
                }
            }
            function doOnLoad() {
                // items;
                workareaContextMenu = new dhtmlXMenuObject();
                workareaContextMenu.renderAsContextMenu();
                workareaContextMenu.addContextZone("workarea");
                workareaContextMenu.setIconsPath("DHTMLX/dhtmlxMenu/samples/common/imgs/");
                workareaContextMenu.addNewChild(workareaContextMenu.topId, 0, "Folder", "Create Folder", false, "open.gif");
                workareaContextMenu.addNewChild(workareaContextMenu.topId, 1, "Document", "Create Document", false, "save.gif");
                workareaContextMenu.addNewChild(workareaContextMenu.topId, 3, "close", "Close", false, "close.gif");
                workareaContextMenu.addNewChild(workareaContextMenu.topId, 4, "changeBackground", "Change Background", false);
                workareaContextMenu.addNewChild(workareaContextMenu.topId, 5, "addIcon", "Add Icon", false);
                workareaContextMenu.attachEvent("onClick",onClickListener);
            }
            $(document).ready(function(){
                windowDoOnLoad();
                doOnLoad();
                try{
                    ico=new IconManager();
                    ico.iconLoad();
                }catch(e){
                    alert(e)
                }
            });

        </script>
    </body>
</html>